<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <link rel="stylesheet" href="css/css.css" type="text/css">
  <link rel="stylesheet" href="css/base.css" type="text/css">
  <link rel="stylesheet" href="css/patternLock.css" type="text/css">
  <script src="js/jquery-1.8.0.js"></script>
  <script src="js/patternLock.js"></script>
</head>
<body>
  <header>
  	<div class="wrap">
	  	<div class="store fl">
	  		<span>门店：</span>
	  		<em>漕河泾店</em>
	  	</div>
	  	<div class="username fl">
	  		<span>用户名：</span>
	  		<em>admin</em>
	  	</div>
	  	<!-- *em标签里需控制字数 -->
	  	<div class="clear"></div>
  	</div>
  </header>
  <div class="mainWrap">
  	<div class="back">
  		<i></i>
  	</div>
    <div class="pswSetBox pswSetBox_open"><!-- 关闭时移除pswSetBox_open即可 -->
      <div class="settingBox">
        <span>开启手势密码</span>
        <i class="switch"></i>
      </div>
      <div class="unlockBox">
        <div class="top">
          <div class="wrap">
            <ul class="icon">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="clear"></div>
          <p>绘制解锁密码</p>
        </div>
        <div class="patt-holder" id="patternHolder">
          <ul class="patt-wrap">
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
            <li>
              <div class="patt-dots"></div>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <p>退出应用后，程序自动锁定屏幕</p>
        </div>
      </div>
    </div>
  </div>
  <nav>
  	<ul>
  		<li>
  			<div class="wrap">
  				<i class="verify"></i>
  				<p>核销</p>
  			</div>
  		</li>
  		<li>
  			<div class="wrap">
  				<i class="check"></i>
  				<p>交易查询</p>
  			</div>
  		</li>
  		<li class="cur"><!-- 添加cur时高亮 -->
  			<div class="wrap">
  				<i class="more"></i>
  				<p>更多</p>
  			</div>
  		</li>
  	</ul>
  </nav>
  <script>
    var lock = new PatternLock('#patternHolder');
  </script>
</body>
</html>